<template>
	<view class="form">
		<view class="form-item">
			<view class="form-item-title">姓名:</view>
			<view class="form-item-input">
				<input class="bottom-line" v-model="addresInfo.username" placeholder="请输入姓名" />
			</view>
		</view>

		<view class="form-item">
			<view class="form-item-title">手机:</view>
			<view class="form-item-input">
				<input class="bottom-line" v-model="addresInfo.phone" placeholder="请输入手机" />
			</view>
		</view>
		<view class="form-item">
			<view class="form-item-title">省市区:</view>
			<view class="form-item-input bottom-line">
				<text class="gray">请选择省市区</text>				
			</view>
		</view>
		<view class="form-item">
			<view class="form-item-title">详细地址:</view>
			<view class="form-item-input">
				<textarea  class="textareat bottom-line" placeholder="请输入详细地址" v-model="addresInfo.addressDetail"></textarea>
			</view>
		</view>

		<view class="form-item">
			<view class="form-item-title">默认地址:</view>
			<view class="form-item-input">
				<switch style="transform:scale(0.8)" :checked="addresInfo.valid==1" @change="validChange" />
			</view>
		</view>
		<view class="btn">保存</view>
	</view>

</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLoad,
		onReady
	} from "@dcloudio/uni-app"

	const addresInfo = reactive({})

	const isAdd = ref(true)


	const validChange = () => {

	}
	onLoad((e) => {
		if (e.id) {
			isAdd.value = false
			Object.assign(addresInfo, {
				id: 1,
				username: "张三",
				phone: "18888888888",
				provinceName: "江苏省",
				cityName: "南京市",
				regionName: "建邺区",
				addressDetail: "油坊桥76号",
				valid: 10
			})
		}
	})
	onReady(() => {
		const title = isAdd.value ? '新增地址' : '修改地址'
		if (isAdd.value) {
			uni.setNavigationBarTitle({
				title
			});
		}
	})
</script>

<style scoped>
	.form {
		height: 100vh;
	}

	
	
	.form-item {
		display: flex;
		align-items: center;
	}

	.form-item-input {
		width: 100%;
	}
	.bottom-line {
		border-bottom: 1px solid #eee;
	}

	.form-item-title {
		width: 170rpx;
		line-height: 60rpx;
	}


	.textareat {
		width: 100%;
		height: 60px;
	}

	.btn {
		width: 80%;
		height: 30px;
		line-height: 30px;
		margin: 40rpx auto;
		text-align: center;
		background: #5555ff;
		color: #fff;
		padding: 10rpx;
		border-radius: 20rpx;
	}
	.gray{
		color: gray;
	}
</style>